<template>
  <!-- 人员设备分析 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>人员/设备分析</p>
        <el-date-picker
          v-model="date"
          type="daterange"
          size="small"
          class="statistics-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        />
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-row style="margin-top:10px" :gutter="15">
        <el-col :span="24">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span v-if="name">{{ name + '/' + seriesName }}</span>
              <span v-else>全部人员</span>
            </h3>
            <el-row :gutter="10">
              <el-col :span="12">
                <EchartsTwoBar
                  height="285px"
                  :user-count-list="userCountList"
                  :name-list="nameList"
                  :enrollment-list="enrollmentList"
                  x-axis-name="人员类型"
                  @setPerson="setPerson"
                />
              </el-col>
              <el-col :span="12">
                <ProjectTable :list-data="StatisticAnalysis" type="01" :list-header="LevellistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col style="margin-top:10px" :span="24">
          <div class="bar">
            <div class="bar-img" />
            <h3 class="title center">
              <span>设备类型</span>
            </h3>
            <el-row :gutter="10">
              <el-col :span="12">
                <EchartsOneBar x-axis-name="设备类型" series-name="设备个数" height="300px" :count-exploration="CountExploration" @setEquipment="setEquipment" />
              </el-col>
              <el-col :span="12">
                <ProjectTable :list-data="EquipmentStatisticalAnalysis" type="02" :list-header="LandlistHeader" />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import { PersonnelEquipment } from '@/api/statisticalAnalysis/PersonnelEquipment'
import EchartsOneBar from '@/components/EchartsComponents/EchartsOneBar'
import EchartsTwoBar from '@/components/EchartsComponents/EchartsTwoBar'
import ProjectTable from './components/ProjectTable'
export default {
  name: 'Home',
  components: {
    EchartsOneBar,
    EchartsTwoBar,
    ProjectTable
  },
  data() {
    return {
      // 时间搜索
      date: '',
      filter: {
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      name: '',
      seriesName: '',
      // 设备
      CountExploration: [], // 图形
      EquipmentStatisticalAnalysis: [], // 表格
      LandlistHeader: [ // 设备表头
        { name: '参与项目' },
        { name: '钻机编号' },
        { name: '钻机名称' }
      ],
      // 人员
      enrollmentList: [],
      userCountList: [],
      nameList: [],
      // 图形
      StatisticAnalysis: [], // 表格
      LevellistHeader: [ // 人员表头
        { name: '参与项目' },
        { name: '人员名称' },
        { name: '总合同额(万元)' }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 改变时间
    dateChange(e) {
      if (e) {
        this.filter.statisticsStartTime = e[0]
        this.filter.statisticsEndTime = e[1]
      } else {
        this.filter.statisticsStartTime = ''
        this.filter.statisticsEndTime = ''
      }
      this.enrollmentList = []
      this.userCountList = []
      this.nameList = []
      this.getList()
    },
    // 获取页面数据
    async getList() {
      const {
        data: {
          Equiment: { CountExploration, EquipmentStatisticalAnalysis },
          Person: { Enrollments, StatisticAnalysis }
        }
      } = await PersonnelEquipment(this.filter)
      // 设备
      this.CountExploration = CountExploration
      this.EquipmentStatisticalAnalysis = EquipmentStatisticalAnalysis
      // 人员
      Enrollments.forEach(item => {
        this.enrollmentList.push(item.enrollment)
        this.userCountList.push(item.personNumber)
        this.nameList.push(item.sysUserType)
      })
      this.StatisticAnalysis = StatisticAnalysis
    },
    goProject() {
      this.$router.push({
        path: '/statisticalAnalysis/project'
      })
    },
    // 点击柱状图回显人员数据
    setPerson({ name, seriesName }) {
      this.name = name
      this.seriesName = seriesName
    },
    // 点击柱状图回显设备数据
    setEquipment(name) {
      console.log(name)
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>
